<%--
  Created by IntelliJ IDEA.
  User: benhailong
  Date: 2018/2/7
  Time: 下午3:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加管理员</title>
    <link rel="stylesheet" href="<%=basePath%>templates/style/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=basePath%>templates/style/build/css/doc.css" media="all">
    <script src="<%=basePath%>templates/style/plugins/layui/layui.js"></script>
    <script src="<%=basePath%>templates/style/plugins/layui/jquery-3.3.1.min.js"></script>
    <%--富文本编辑器--%>
    <link rel="stylesheet" href="<%=basePath%>templates/style/kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="<%=basePath%>templates/style/kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="<%=basePath%>templates/style/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="<%=basePath%>templates/style/kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="<%=basePath%>templates/style/kindeditor/plugins/code/prettify.js"></script>
</head>
<body>

    <div class="kit-doc">
        <form class="layui-form layui-form" action="">

            <%--广告位ID--%>

            <input type="hidden" value="${id}" name="boxId">

                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="layui-badge-dot"></span> &nbsp;广告类型</label>
                    <div class="layui-input-block">
                        <select name="advTypeId" lay-verify="required" lay-filter="type1" lay-search="">
                            <option value="">--请选择--</option>
                            <c:forEach items="${kitList}" var="kitList" >
                            <option value="${kitList.id}">${kitList.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <%--标题--%>
                <div class="layui-form-item" id="title" style="display: none">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input name="title" lay-verify="" placeholder="请输入标题" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <%--排序--%>
                <div class="layui-form-item" id="no" style="display: none">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input name="no" lay-verify="number" placeholder="默认50，越大越靠前" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <%--副标题--%>
                <div class="layui-form-item" id="subhead" style="display: none">
                    <label class="layui-form-label">副标题</label>
                    <div class="layui-input-block">
                        <input name="subhead" lay-verify="" placeholder="请输入副标题" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <%--图片--%>
                <div class="layui-form-item" id="imgs" style="display: none">
                    <label class="layui-form-label" style="height: 137px; line-height: 117px">图片</label>
                    <input name="imgurl" id="imgurl" lay-verify="" value="" autocomplete="off" class="layui-input" type="hidden">
                    <div class=" layui-upload-drag" id="img" >
                        <i class="layui-icon">&#xe654;</i>
                        <p>点击上传图片</p>
                        <img id="demo1" style="position: absolute;height: 137px;width: 137px;margin: -106px auto auto -30px;display: none" />
                    </div>
                </div>
                <%--简介--%>
                <div class="layui-form-item" id="explain" style="display: none">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="explain" class="layui-textarea"></textarea>
                    </div>
                </div>
                <%--原价--%>
                <div class="layui-form-item" id="oldPrice" style="display: none">
                    <label class="layui-form-label">原价</label>
                    <div class="layui-input-block">
                        <input name="oldPrice" lay-verify="" placeholder="请输入商品原价" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <%--现价--%>
                <div class="layui-form-item" id="newPrice" style="display: none">
                    <label class="layui-form-label">现价</label>
                    <div class="layui-input-block">
                        <input name="newPrice" lay-verify="" placeholder="请输入折扣价格" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-form-item" id="staticTime" style="display: none">
                    <label class="layui-form-label">起止时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="time" class="layui-input" id="time" placeholder=" - ">
                    </div>
                </div>
                <div class="layui-form-item" id="informationId" style="display: none">
                    <label class="layui-form-label">链接ID</label>
                    <div class="layui-input-block">
                        <input name="informationId" lay-verify="" placeholder="请输入编辑器" autocomplete="off" class="layui-input" type="text">

                    </div>
                </div>

                <div class="layui-form-item" id="editor" style="display: none">
                    <label class="layui-form-label">编辑器</label>
                    <div class="layui-input-block">
                        <textarea name="content1"  cols="100" rows="8" style="width:700px;height:350px;visibility:hidden;"></textarea>
                    </div>
                </div>
                <script>
                    KindEditor.ready(function(K) {
                        var editor1 = K.create('textarea[name="content1"]', {
                            width:'100%',
                            themeType : 'simple',
                            cssPath : '<%=basePath%>templates/style/kindeditor/plugins/code/prettify.css',
                            uploadJson : '<%=basePath%>apiCommon/upload_json',
                            fileManagerJson : '<%=basePath%>apiCommon/file_manager_json',
                            allowFileManager : true,
                            afterCreate : function() {
                                var self = this;
                                K.ctrl(document, 13, function() {
                                    self.sync();
                                    document.forms['example'].submit();
                                });
                                K.ctrl(self.edit.doc, 13, function() {
                                    self.sync();
                                    document.forms['example'].submit();
                                });
                            }
                        });
                        prettyPrint();
                    });
                </script>

            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
            </div>
        </form>

        <!--这里写页面的代码-->
    </div>

    <script>
        layui.use(['form', 'layedit', 'laydate', 'element', 'layer', 'upload'], function(){
            var form = layui.form,
                layer = layui.layer,
                element = layui.element,
                upload = layui.upload,
                laydate = layui.laydate;

                //日期时间范围
                laydate.render({
                    elem: '#time'
                    ,type: 'datetime'
                    ,range: true
                });

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#img'
                , url: '/apiCommon/setImage'
                , field: 'layuiFile'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result, data) {
                        $('#demo1').css('display','block').attr('src', result); //链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    if(res.code == 0){
                        $('#imgurl').val(res.data.src);
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });

            // 监听下拉框
            form.on('select(type1)', function(data){
                $.ajaxSetup ({
                    async: false
                });

                // 获取哪些信息需要显示
                $.post("<%=basePath%>adv_type/getModel", {"id": data.value},function(data){

                    // 先把所有的全部都显示
                    $("#title").css("display","none");
                    $("#no").css("display","block");
                    $("#subhead").css("display","none");
                    $("#imgs").css("display","none");
                    $("#explain").css("display","none");
                    $("#oldPrice").css("display","none");
                    $("#newPrice").css("display","none");
                    $("#staticTime").css("display","none");
                    $("#informationId").css("display","none");
                    $("#editor").css("display","none");

                    if(data.KitModel.titleType == '1'){
                        $("#title").css("display","block");
                    }
                    if(data.KitModel.explainType == '1'){
                        $("#explain").css("display","block");
                    }
                    if(data.KitModel.priceType == '1'){
                        $("#oldPrice").css("display","block");
                        $("#newPrice").css("display","block");
                    }
                    if(data.KitModel.timeType == '1'){
                        $("#staticTime").css("display","block");
                    }
                    if(data.KitModel.subheadType == '1'){
                        $("#subhead").css("display","block");
                    }
                    if(data.KitModel.imgType == '1'){
                        $("#imgs").css("display","block");
                    }
                    if(data.KitModel.editorType == '1'){
                        $("#editor").css("display","block");
                    }
                    $("#informationId").css("display","block");
                });
            });

            //监听提交，发送请求
            form.on('submit(add)', function(data){
                $.post("<%=basePath%>adv_list/add",data.field,function(data){
                    // 获取 session
                    if(data.code!=200){
                        layer.alert(data.msg, {offset: 't',icon: 5});
                    }
                    if(data.code==200){
                        layer.alert(data.msg, {offset: 't',icon: 6});
                    }
                });
                return false;
            });

        });
    </script>
</body>
</html>
